<template>
	<view class="wrap">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">添加收货地址</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>

		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" v-model="form.receiver" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" v-model="form.mobile" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" placeholder-class="line" v-model="form.address" placeholder="省市区县、乡镇等" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea class="didAddress" type="text" v-model="form.detaileAds" placeholder-class="line"
					placeholder="街道、楼牌等" />
			</view>
			<view class="item">
				<view class="left">设为默认</view>
				<u-switch v-model="isDefault" activeColor="#CEA539" size="20" @change="switchchange"></u-switch>
				</u-switch>
			</view>
		</view>
		<view class="submit-bottom" @tap="modifyAddress" v-if="id">
			<view class="submit-btn">
				确认并修改
			</view>
		</view>
		<view class="submit-bottom" @tap="saveAddress" v-else>
			<view class="submit-btn">
				保存并使用
			</view>
		</view>
		<u-picker ref="uPicker" :show="show" keyName="label" :columns="columns" @change="changeHandler1"
			@cancel="pickerCancel" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		appaddress_add,
		appaddress_selectid,
		appaddress_modify
	} from "@/api/user.js";
	import provinces from "@/common/province.js";
	import citys from "@/common/city.js";
	import areas from "@/common/area.js";
	export default {
		data() {
			return {
				id: null,
				form: {
					address: '',
					detaileAds: '',
					isDefault: '0',
					mobile: '',
					receiver: '',
				},
				isDefault: false,
				show: false,
				columns: [],
				columnData: [],
				columnData2: []
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				appaddress_selectid(this.id).then(res => {
					this.form = res.data.obj
					if (this.form.isDefault == 1) {
						this.isDefault = true
					} else {
						this.isDefault = false
					}
				})
			}
		},
		onShow() {},
		methods: {
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			switchchange(e) {
				this.isDefault = e
				if (this.isDefault) {
					this.form.isDefault = '1'
				} else {
					this.form.isDefault = '0'
				}
			},
			modifyAddress() {
				try {
					if (!this.form.receiver) throw '请填写收货人姓名'
					if (!this.form.mobile) throw '请填写收货人手机号'
					if (!this.form.address) throw "请选择所在地区";
					if (!this.form.detaileAds) throw "请填写详细地址";
				} catch (e) {
					this.$u.toast(e);
					return
				}
				let _this = this
				appaddress_modify(this.form).then(res => {
					if (res.data.success) {
						this.$u.toast('修改成功')
						setTimeout(function() {
							_this.routeBack()
						}, 1000)
					} else {
						this.$u.toast('修改失败,请稍后重试')
					}
				})
			},
			saveAddress() {
				try {
					if (!this.form.receiver) throw '请填写收货人姓名'
					if (!this.form.mobile) throw '请填写收货人手机号'
					if (!this.form.address) throw "请选择所在地区";
					if (!this.form.detaileAds) throw "请填写详细地址";
				} catch (e) {
					this.$u.toast(e);
					return
				}
				let _this = this
				appaddress_add(this.form).then(res => {
					if (res.data.success) {
						this.$u.toast('保存成功')
						setTimeout(function() {
							_this.routeBack()
						}, 1000)
					} else {
						this.$u.toast('保存失败,请稍后重试')
					}
				})
			},
			showRegionPicker() {
				this.columns.push(provinces)
				this.columnData = citys
				this.columnData2 = areas
				this.form.address = ''
				this.show = true;
			},
			pickerCancel() {
				this.show = false
			},
			pickerConfirm(indexs, value, values) {
				this.show = false
				this.columns = []
				this.columnData = []
				this.columnData2 = []
				if (indexs.value) {
					indexs.value.map(item => {
						this.form.address += item.label
					})
				}
			},
			changeHandler1(e) {
				this.change(e)
				const {
					columnIndex,
					value,
					values,
					indexs,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnData[index])
				} else if (columnIndex === 1) {
					picker.setColumnValues(2, this.columnData2[indexs[0]][indexs[1]])
				}
			},
			change(e) {

			},
			// 导航栏左侧返回
			routeBack() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	
	/deep/ .line {
		color: #999;
		font-size: 28upx;
	}

	/deep/ .u-picker__view__column__item {
		font-size: 24upx;
	}

	input {
		color: #EEEEEE;
	}
	
	.logoBox {
		width: 100%;
		height: 100%;
	
		.navBox {
			height: 120upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
		}
	}
	
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600upx;
		line-height: 80upx;
		position: absolute;
		bottom: 30upx;
		left: 80upx;
		background: linear-gradient(89.99deg, #FFAD02 7%, #FE9F38 89.24%);
		border-radius: 60upx;
		font-size: 30upx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10upx;
			}
		}
	}
	
	.submit-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 16upx 50upx 30upx;
		position: fixed;
		bottom: 20upx;
		left: 0;
	
		.submit-btn {
			width: 100%;
			height: 96upx;
			background: #CEA539;
			border-radius: 10upx;
			font-size: 32upx;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.wrap {
		width: 100%;
		/* #ifdef APP-PLUS */
		padding-top: calc(120upx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		padding-top: 140upx;
		/* #endif */
		min-height: 100vh;

		.backImg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;

			image {
				width: 80upx;
				height: 80upx;
			}
		}

		.top {

			.item {
				padding: 0 20upx;
				display: flex;
				font-size: 32upx;
				line-height: 100upx;
				align-items: center;
				border-radius: 10upx;
				margin: 0 20upx;
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);

				.left {
					width: 180upx;
					// color: #EEEEEE;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				input {
					text-align: left;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.address {
				padding: 20upx 20upx;

				.left {
					width: 180upx;
				}

				textarea {
					height: 160upx;
					line-height: 60upx;
					margin: 20upx auto;
					padding: 20upx;
				}
			}

			.site-clipboard {
				padding-right: 40upx;

				textarea {
					line-height: 60upx;
					margin: 40upx auto;
					padding: 20upx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26upx;
					color: $u-tips-color;
					height: 80upx;

					.icon {
						margin-top: 6upx;
						margin-left: 10upx;
					}
				}
			}
		}

		.didAddress {
			padding: 40upx 30upx;
			margin-top: 40upx;

			font-size: 28upx;
			font-family: 'PingFang SC';
			font-weight: 500;
			color: #333;
			line-height: 28upx;
			border: 4upx solid rgba($color: #C8C8C9, $alpha: 0.15);

			border-radius: 6upx;
		}
	}
</style>
<style scoped>
	page{
		background-color: #fff;
	}
</style>